<template>
  <h3>案例：横向条形图，与圆角柱子</h3>
  <code-demo :code="htmlCode" :scriptCode="scriptCode">
    <chart-base style="width: 100%; height: 300px" :option="option"></chart-base>
  </code-demo>
</template>

<script setup>
import {
  gridContainLabel,
  yAxisLabelColor,
  yAxisLabelFontSize,
  yAxisLabelMargin,
  yAxisLabelLineHeight,
  gradientColor,
  barWidth,
  barBorderRadius,
} from 'ui-lib/components/chart/style'

function getBarColor(colorType) {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: gradientColor[colorType][0] },
      { offset: 1, color: gradientColor[colorType][1] },
    ],
  }
}

const option = {
  grid: {
    containLabel: gridContainLabel,
    left: 0,
    right: 20,
    top: 0,
    bottom: 0,
  },
  tooltip: {
    show: false,
  },
  xAxis: {
    type: 'value',
    show: false,
  },
  yAxis: [
    {
      type: 'category',
      data: [
        '买卖合同纠纷',
        '建设工程分包合同\n纠纷',
        '劳动争议',
        '建设工程合同纠纷',
        '建设工程施工合同\n纠纷',
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
        lineHeight: yAxisLabelLineHeight,
      },
    },
  ],
  series: [
    {
      type: 'bar',
      data: [
        {
          value: 4,
          itemStyle: {
            color: getBarColor('green'),
          },
        },
        {
          value: 3,
          itemStyle: {
            color: getBarColor('blue'),
          },
        },
        {
          value: 2,
          itemStyle: {
            color: getBarColor('purple'),
          },
        },
        {
          value: 5,
          itemStyle: {
            color: getBarColor('orange'),
          },
        },
        {
          value: 4,
          itemStyle: {
            color: getBarColor('red'),
          },
        },
      ],
      barWidth,
      label: {
        show: true,
        position: 'right',
        fontSize: 14,
      },
      itemStyle: {
        borderRadius: [0, barBorderRadius, barBorderRadius, 0],
      },
    },
  ],
}

const htmlCode = `<chart-base style="width: 100%; height: 300px" :option="option"></chart-base>
`
const scriptCode = `
import {
  gridContainLabel,
  yAxisLabelColor,
  yAxisLabelFontSize,
  yAxisLabelMargin,
  yAxisLabelLineHeight,
  gradientColor,
  barWidth,
  barBorderRadius,
} from 'ui-lib/components/chart/style'

function getBarColor(colorType) {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: gradientColor[colorType][0] },
      { offset: 1, color: gradientColor[colorType][1] },
    ],
  }
}

const option = {
  grid: {
    containLabel: gridContainLabel,
    left: 0,
    right: 20,
    top: 0,
    bottom: 0,
  },
  tooltip: {
    show: false,
  },
  xAxis: {
    type: 'value',
    show: false,
  },
  yAxis: [
    {
      type: 'category',
      data: [
        '买卖合同纠纷',
        '建设工程分包合同\\n纠纷',
        '劳动争议',
        '建设工程合同纠纷',
        '建设工程施工合同\\n纠纷',
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: yAxisLabelColor,
        margin: yAxisLabelMargin,
        fontSize: yAxisLabelFontSize,
        lineHeight: yAxisLabelLineHeight,
      },
    },
  ],
  series: [
    {
      type: 'bar',
      data: [
        {
          value: 4,
          itemStyle: {
            color: getBarColor('green'),
          },
        },
        {
          value: 3,
          itemStyle: {
            color: getBarColor('blue'),
          },
        },
        {
          value: 2,
          itemStyle: {
            color: getBarColor('purple'),
          },
        },
        {
          value: 5,
          itemStyle: {
            color: getBarColor('orange'),
          },
        },
        {
          value: 4,
          itemStyle: {
            color: getBarColor('red'),
          },
        },
      ],
      barWidth,
      label: {
        show: true,
        position: 'right',
        fontSize: 14,
      },
      itemStyle: {
        borderRadius: [0, barBorderRadius, barBorderRadius, 0],
      },
    },
  ],
}`
</script>
